<template>
  <div id="main"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      const chartDom = document.getElementById('main')
      this.myChart = echarts.init(chartDom)
    },
    setEChartsOptions(data) {
      let option

      let xAxisData = [];
      let data1 = [];
      let data2 = [];

      data.forEach(item=>{
        xAxisData.push(item.name);
        data1.push(item.un_complete_count)
        data2.push(item.complete_count)
      })
      const emphasisStyle = {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: '#1890ff'
        }
      }
      option = {
        legend: {
          data: ['未完成', '已完成'],
        },
        // toolbox: {
        //   feature: {
        //     magicType: {
        //       type: ['stack']
        //     },
        //     dataView: {}
        //   }
        // },
        tooltip: {
          trigger:"item",
        },
        xAxis: {
          data: xAxisData,
          name: ''
        },
        yAxis: {},
        grid: {
          // bottom: 100
          left:50,
          right:50
        },
        series: [
          {
            name: '未完成',
            type: 'bar',
            emphasis: emphasisStyle,
            data: data1
          },
          {
            name: '已完成',
            type: 'bar',
            emphasis: emphasisStyle,
            data: data2
          }
        ]
      };
      // this.myChart.on('brushSelected', function (params) {
      //   const brushed = []
      //   const brushComponent = params.batch[0]
      //   for (let sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
      //     const rawIndices = brushComponent.selected[sIdx].dataIndex
      //     brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
      //   }
      //   this.myChart.setOption({
      //     title: {
      //       backgroundColor: '#333',
      //       text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
      //       bottom: 0,
      //       right: '10%',
      //       width: 100,
      //       textStyle: {
      //         fontSize: 12,
      //         color: '#fff'
      //       }
      //     }
      //   });
      // });

      this.myChart && this.myChart.setOption(option);
    },
  },
}
</script>

<style lang="scss" scoped>
#main {
  width: 100%;
  height: 500px;
}
</style>
